<template>
	<div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">专家组列表</div>
				<div>
					<!-- <el-button type="primary" size="mini" class="topButton" round>置顶</el-button> -->
					<el-button type="primary" size="mini" class="topButton" round @click="dialogVisible = true">新增</el-button>
				</div>
			</div>
		</div>
		<el-table :data="tableData.items" style="width: 100%" ref="singleTable" highlight-current-row @row-click="rowClick">
			<el-table-column prop="expertName" label="专家组名称"></el-table-column>
			<el-table-column prop="count" label="人数"></el-table-column>
			<el-table-column prop="departmentName" label="部门主管"></el-table-column>
			<el-table-column prop="serviceAddress" label="服务区域"></el-table-column>
			<el-table-column prop="serviceIndustry" label="服务产业"></el-table-column>
			<el-table-column prop="zj" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="toTop(scope.row)">置顶</el-button>
					<el-button type="text" size="mini" @click="updateRrow(scope.row)">修改</el-button>
					<el-button type="text" style="color: #F42929;" size="mini" @click="deleteExpert(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagina-tion :totalNum="tableData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		<!-- 新增专家组 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
			<div v-show="!dialogData.isNext">
				<el-form label-width="9rem" :model="dialogData">
					<el-form-item label="专家组名称">
						<el-input v-model="dialogData.expertGroupName" placeholder="请输入专家组名称"></el-input>
					</el-form-item>
					<el-form-item label="服务地址">
						<address-Cascader :value="[]" :checkStrictly="true" ref="CascaderKey" placeholder="请选择服务地址" @getAddressData="getAddressData"></address-Cascader>
					</el-form-item>
					<el-form-item label="服务产业">
						<el-select v-model="dialogData.dictionariesId" style="width: 100%;" placeholder="请选择">
							<el-option v-for="item in industry" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<!-- <address-Cascader :value="[]" :checkStrictly="true" ref="CascaderKey" placeholder="请选择服务产业" @getAddressData="getAddressData"></address-Cascader> -->
					</el-form-item>
				</el-form>
			</div>
			<div v-show="dialogData.isNext">
				<el-table ref="multipleTable" :data="menbersList.items" tooltip-effect="dark" style="width: 100%" @select="rowSelect"
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55"> </el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="phone" label="电话"></el-table-column>
					<el-table-column prop="mainCompany" label="主团队"></el-table-column>
					<el-table-column prop="departmentName" label="部门"></el-table-column>
					<el-table-column prop="dutiesName" label="职务"></el-table-column>
					<el-table-column prop="address" label="主管">
						<template slot-scope="scope">
							<el-button type="text" size=" " v-if="scope.row.userId == dialogData.director" @click="setAdmins('')">取消主管</el-button>
							<el-button type="text" size=" " v-else :disabled="dialogData.director?true:false" @click="setAdmins(scope.row)">设为主管</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagina-tion :totalNum="menbersList.totalNum" @paginaClick="dialogTableDataPaginaClick"></pagina-tion>
			</div>
			<span slot="footer" class="dialog-footer" v-show="!dialogData.isNext">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="dialognext">下一步</el-button>
			</span>
			<span slot="footer" class="dialog-footer" v-show="dialogData.isNext">
				<el-button @click="dialoglast">返回上一步</el-button>
				<el-button type="primary" @click="confirmAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: '', // 专家组数据
				companyId: '',
				userId: '',
				// 新增专家组
				dialogTitle: '填写信息',
				dialogVisible: false,
				industry: '', // 服务产业数据
				dialogData: {
					companyId: '',
					isNext: false,
					expertGroupName: '', // 专家组名称
					serviceAddress: '', // 服务地址
					serviceAddressId: '', // 服务地址 id
					dictionariesId: '', // 服务产业字典id
					userId: [], // userId=专家组成员id,director=专家组主管id：0不是，1是
					director: '',
					directorUserId: '' // 部门主管id
				},
				dialogTableData: [],
				// dialogQueryData: {
				// 	companyId: '',
				// 	page: 1,
				// 	pageSize: $globalData.pageSize
				// },
				dialogSelectData: new Map(), // 记录表格已选择的数据
				queryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 公司所有成员
				menbersList: ''
			}
		},
		mounted() {
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
			this.getExpertGroupList()
		},
		watch: {
			dialogVisible(newData) {
				if (!newData) {
					this.dialogSelectData.clear()
					this.dialogTableData = []
					this.dialogData.isNext = false
					this.dialogData.director = ''
					this.dialogData.serviceAddress = ''
					this.dialogData.serviceAddressId = ''
					this.dialogData.userId = []
					this.dialogData.expertGroupName = ''
					this.dialogData.dictionariesId = ''
					this.dialogData.directorUserId = ''
					this.$refs.CascaderKey.values = []
				} else {
					// 获取服务产业
					this.$request.get(this.$api.queryDictionaries).then(res => {
						if (res.code == 200) {
							this.industry = res.data
						}
					})
				}
			}
		},
		methods: {
			toTop(row) {
				// 置顶
				this.$request.get(this.$api.ExpertGrouptop, {
					id: row.id
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('操作成功')
						this.getExpertGroupList()
					}
				})
			},
			deleteExpert(row) {
				// 删除removeExpert
				this.$confirm('确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.get(this.$api.removeExpert, {
						id: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if(this.queryData.page > 1){
								this.queryData.page = Math.ceil((this.tableData.totalNum - 1) / $globalData.pageSize)
							}
							this.getExpertGroupList()
						}
					})
				})
			},
			updateRrow(row){
				// 修改
				this.$router.push(`/entrance/teammanagement/modificationspecialist/${row.id}`)
			},

			rowClick(row, column, event){
				// 单击某一行
				console.log(row)
				// this.$parent.$refs.specialistGroupMenber.queryData.expertGroupId = row.id
				// this.$parent.$refs.specialistGroupMenber.getMenbersList()
				setTimeout(()=>{
					this.$refs.singleTable.setCurrentRow(row);
					this.$parent.$refs.specialistGroupMenber.queryData.expertGroupId = row.id
					this.$parent.$refs.specialistGroupMenber.getMenbersList()
				},300)
			},
			getExpertGroupList() {
				// 获取专家组列表
				this.queryData.companyId = this.companyId
				this.$request.get(this.$api.queryExpertGroupList, this.queryData).then(res => {
					if (res.code == 200) {
						this.tableData = res.data
						if(this.tableData.items.length > 0){
							setTimeout(()=>{
								this.$refs.singleTable.setCurrentRow(this.tableData.items[0]);
								this.$parent.$refs.specialistGroupMenber.queryData.expertGroupId = this.tableData.items[0].id
								this.$parent.$refs.specialistGroupMenber.getMenbersList()
							},300)
						}
						
					}
				})
			},
			paginaClick(val) {
				this.queryData.page = val
				this.getExpertGroupList()
			},
			// 弹窗
			// 弹窗方法
			dialogTableDataPaginaClick(val) {
				// 分页
				this.getCompanyMenbers(val)
			},
			getCompanyMenbers(page = 1) {
				// 获取专家列表
				this.$request.postForm(this.$api.queryExpertNotInGroup, {
					companyId: this.companyId,
					groupId: '',
					page: page,
					pageSize: $globalData.pageSize
				}).then(res => {
					if (res.code == 200) {
						this.menbersList = res.data
						setTimeout(() => {
							this.selectTables()
						}, 100)
					}
				})
			},
			selectTables() {
				// 初始化表格选中状态
				this.menbersList.items.forEach((v, i) => {
					if (this.dialogSelectData.has(v.userId)) {
						this.$refs.multipleTable.toggleRowSelection(v)
					}
				})
				this.$forceUpdate()
			},
			dialognext() {
				// 下一步
				if (!this.dialogData.expertGroupName) {
					this.$message.error('专家组名称不能为空')
					return
				}
				if (!this.dialogData.serviceAddress) {
					this.$message.error('服务地址不能为空')
					return
				}
				if (!this.dialogData.dictionariesId) {
					this.$message.error('请选择服务产业')
					return
				}
				this.getCompanyMenbers(1)
				this.dialogTitle = '选择成员'
				this.$set(this.dialogData, 'isNext', true)
			},
			getAddressData(obj) {
				// 选择地址
				this.dialogData.serviceAddress = obj.text
				this.dialogData.serviceAddressId = obj.key
			},
			rowSelect(selection, row) {
				// 单选某一行时的函数
				if (this.dialogSelectData.has(row.userId)) {
					this.dialogSelectData.delete(row.userId)
				} else {
					this.dialogSelectData.set(row.userId, row)
				}
			},
			handleSelectionChange(e) {
				// 表格选中数据
				e.forEach((v) => {
					this.dialogSelectData.set(v.userId, v)
				})
			},
			setAdmins(row) {
				// 设为主管
				if (row) {
					if (this.dialogSelectData.has(row.userId)) {
						this.dialogData.director = row.userId
						this.menbersList.items.forEach((v, i) => {
							if (v.userId === row.userId) {
								v.isAdmin = true
								v.director = 1
							} else {
								v.isAdmin = false
								v.director = 0
							}
						})
						this.$forceUpdate()
					} else {
						this.$message.error('需要选择该成员才能设置为主管')
					}
				} else {
					this.dialogData.director = ''
					this.menbersList.items.forEach((v, i) => {
						v.isAdmin = false
						v.director = 0
					})
				}

			},
			dialoglast() {
				// 上一步
				this.dialogTitle = '填写信息'
				this.dialogData.isNext = false
			},
			confirmAdd() {
				// 确定添加专家组
				if (this.dialogSelectData.size < 1) {
					this.$message.error('请选择专家组成员')
					return
				}

				let isadmin = false
				
				this.dialogData.userId = []
				this.dialogSelectData.forEach(v => {
					if (v.director === 1) {
						isadmin = true
						this.dialogData.directorUserId = v.userId
					}
					this.dialogData.userId.push(v.userId)
				})
				if (!isadmin) {
					this.$message.error('请设置专家组主管')
					return
				}
				this.dialogData.userId = this.dialogData.userId.join(',')
				this.dialogData.companyId = this.companyId
				this.$request.get(this.$api.saveExpertGroup, this.dialogData).then(res => {
					if (res.code == 200) {
						this.$message.success('添加成功')
						this.queryData.page = 1
						this.getExpertGroupList()
						this.dialogVisible = false
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	/* .breadcrumb,
	.tableNavBox {
		padding: 20px;
	} */

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}
</style>
